<!-- 直接费用 -->
<template>
  <div class="module_">
    <div class="flex-space-between mb8 search_box">
      <el-form :inline="true" :model="pageparm" class="user-search">
        <el-form-item label="搜索：">
          <el-select v-model="pageparm.sub_department_id" clearable filterable placeholder="请选择二级科室筛选" @change='onchange("sub_department_id")'>
            <el-option
              v-for="item in cacheSubDepartments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="pageparm.type" placeholder="请选择收入类型筛选" @change='onchange("type")'>
            <el-option
              v-for="item in incomeType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            @change='onchange("date")'
            v-model="pageparm.date"
            type="month"
            format="yyyy年MM月"
            value-format="yyyy-MM"
            placeholder="选择年月筛选">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="150"
      size="small"
      border
      highlight-current-row
      v-loading="tableLoading"
      @sort-change="tableSortChange"
      stripe
    >
      <el-table-column
        align="center"
        prop="department.name"
        label="二级科室"
        width="150"
        sortable="custom"
        show-overflow-tooltip
        fixed
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="日期"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="diagnosis_income"
        label="诊察收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="check_income"
        label="检查收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="treatment_income"
        label="治疗收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="assay_income"
        label="化验收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="bed_income"
        label="床位收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="nursing_income"
        label="护理收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="material_income"
        label="材料收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="drug_income"
        label="药品收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="surgery_income"
        label="手术收入"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="收入类型"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
</template>

<script>
import {Apigeneralizedincome} from '@/api'
import {incomeType} from '@/assets/js';
import { debounce } from "@/utils";
import { mapState,mapActions} from 'vuex'
export default {
  computed:{
    ...mapState(['cacheSubDepartments'])
  },
  data() {
    return {
      tableData: [],
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: "updated_at",
        sort_order: "desc",
        type: 1,
        date: null,
        sub_department_id: null,
      },
      tableLoading: false,
      incomeType
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    onchange(value){
      this.pageparm[value] = this.pageparm[value] || null
      this.pageparm.page = 1;
      this.getList()
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      if(column.prop === 'department.name') this.pageparm.sort_str = 'sub_department_id';
      this.getList();
    },

    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      Apigeneralizedincome(this.pageparm)
        .then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang='less' scoped>

</style>